import React from "react";
import PropTypes from 'prop-types';
import {
    Card, Col, Input, PageHeader, Row, Tag, Rate, Button, message, Popconfirm
} from "antd";
import {Link} from "react-router-dom";
import {
    PlusCircleOutlined,
    EditOutlined,
    EllipsisOutlined,
    CloseCircleOutlined,
    DeleteOutlined
} from '@ant-design/icons';
import {ShopService, UserService} from "../eosjs/EosService";

const {Search} = Input;
const {Meta} = Card;

class StoreList extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isMerChant: false,
            storeList: []
        };

    }

    componentDidMount() {
        this.isMerChant();
        this.getMyStore();
    }

    render() {
        return (
            <div className="store-list">
                <Row gutter={16}>
                    <Col span={4}>
                        <PageHeader
                            className="site-page-header"
                            onBack={() => this.props.history.go(-1)}
                            title="我的店铺"
                        />
                    </Col>
                    <Col span={12}>
                        <Button type="default" icon={<PlusCircleOutlined/>} style={{marginTop: 15}}
                                onClick={() => {
                                    if (this.state.isMerchant === 1) {
                                        this.props.history.push("/createStore");
                                    } else {
                                        message.error("权限不足，无法添加店铺！");
                                    }
                                }}>添加店铺</Button>
                    </Col>
                </Row>
                <Row gutter={16}>
                    {this.state.storeList.map((value, index) => {
                        return (
                            <Col span={8} key={index}>
                                <Card hoverable cover={<img alt={value.shop_name} src={value.picture_url}/>}
                                      actions={[
                                          <Popconfirm placement="top" title={"是否删除店铺：" + value.shop_name}
                                                      onConfirm={this.deleteShop.bind(this, value.sid)} okText="确定"
                                                      cancelText="取消">
                                              <Button shape="circle" icon={<CloseCircleOutlined/>} danger/>
                                          </Popconfirm>,
                                          <Link to={"/myStore/" + value.sid}><EditOutlined key="edit"/></Link>,
                                      ]}
                                >
                                    <Link to={"/myStore/" + value.sid}><Meta title={value.shop_name + " (" + value.tag + ")"} description=<Rate
                                                                             disabled defaultValue={2}
                                                                             style={{size: 100}}/> /></Link>
                                    <Tag color="default">价格低</Tag> <Tag color="default">有表演</Tag> <Tag
                                    color="default">不排队</Tag>
                                    <p>¥104/人</p>
                                </Card>
                            </Col>
                        );
                    })}


                </Row>

            </div>
        );
    }

    getMyStore = () => {
        ShopService.getShops({user: localStorage.getItem("name_account")}).then(res => {
            console.log(res);
            this.setState({
                storeList: res.rows
            })

        })
    };
    deleteShop = (sid) => {
        ShopService.eraseShop(sid).then(res => {
            if (res.status === true) {
                message.success("店铺删除成功！");
                this.props.history.push("/myStoreList");
            } else {
                message.error("店铺删除失败！");
            }
        })
    }
    isMerChant = () => {
        UserService.getUserInfo(localStorage.getItem("name_account")).then(res => {
            if (res.rows !== null) {
                this.setState({
                    isMerChant: res.rows.is_merchant
                })
            }
            console.log(this.state)
        })
    }
}

StoreList.propTypes = {};

export default StoreList;